<template>
  <div class="app-container">
    <div class="holiday-page">

      <div class="calendar-card">
        <!-- 日历头部 -->
        <div class="calendar-header">
          <button class="month-btn" @click="prevMonth">
            <i class="el-icon-arrow-left"></i>
          </button>
          <span class="current-date">{{ currentYear }}年 {{ monthNames[currentMonth] }}</span>
          <button class="month-btn" @click="nextMonth">
            <i class="el-icon-arrow-right"></i>
          </button>
        </div>

        <!-- 星期标题 -->
        <div class="weekdays">
          <div class="weekday">周一</div>
          <div class="weekday">周二</div>
          <div class="weekday">周三</div>
          <div class="weekday">周四</div>
          <div class="weekday">周五</div>
          <div class="weekday">周六</div>
          <div class="weekday">周日</div>
        </div>

        <!-- 日历日期 -->
        <div class="days">
          <div
              class="day"
              v-for="(day, index) in monthDays"
              :key="index"
              :class="{
              'other-month': !day.isCurrentMonth,
              'today': day.isToday,
              'has-schedule': day.hasSchedule,
              'has-holiday': day.hasHoliday
            }"
          >
            <span v-if="day.day">{{ day.day }}</span>
          </div>
        </div>

        <!-- 今日信息 -->
        <div class="today-info" v-if="monthDays.some(day => day.isToday)">
          <div class="today-icon">📅</div>
          <div class="today-details">
            <div class="today-date">今日: {{ formatDate(today) }}</div>
            <div class="today-week">第{{ Math.floor((today.getDate() - 1) / 7) + 1 }}周</div>
          </div>
        </div>
      </div>

      <!-- 日程列表 -->
      <div class="schedules-card">
        <div class="schedules-header">
          <h2 class="schedules-title">
            <span class="title-icon">📋</span>
            本月日程
          </h2>

          <!-- 管理员可见的编辑按钮 -->
          <div class="admin-buttons" v-if="isAdmin">
            <el-button
                type="primary"
                @click="isEditing = !isEditing"
            >
              {{ isEditing ? '取消编辑节假日' : '编辑节假日' }}
            </el-button>
            <el-button
                type="primary"
                @click="isEditingSchedule = !isEditingSchedule"
            >
              {{ isEditingSchedule ? '取消编辑日程' : '编辑日程' }}
            </el-button>
          </div>
        </div>

        <!-- 节假日列表展示区 -->
        <div class="holiday-list" v-if="currentMonthHolidays.length > 0 || (isEditing && isAdmin)">
          <h3 class="holiday-title">
            <span class="holiday-icon">🎉</span>
            节假日安排
          </h3>

          <!-- 浏览模式 -->
          <div v-if="!isEditing">
            <div
                v-for="holiday in currentMonthHolidays"
                :key="holiday.id"
                class="holiday-item"
            >
              <div class="view-mode">
                <h3>{{ holiday.name }}</h3>
                <p class="holiday-date">日期: {{ formatDisplayDate(holiday.startDate, holiday.endDate) }}</p>
                <p class="holiday-desc">{{ holiday.description }}</p>
              </div>
            </div>
          </div>

          <!-- 编辑模式（仅管理员可见） -->
          <div v-else-if="isAdmin">
            <div
                v-for="(holiday, index) in holidays"
                :key="holiday.id"
                class="holiday-item"
            >
              <div class="edit-mode">
                <el-input
                    v-model="holiday.name"
                    placeholder="节假日名称"
                    class="edit-input"
                />
                <div class="date-inputs">
                  <el-input
                      v-model="holiday.startDate"
                      type="date"
                      class="edit-input"
                      placeholder="开始日期"
                  />
                  <span class="date-separator">至</span>
                  <el-input
                      v-model="holiday.endDate"
                      type="date"
                      class="edit-input"
                      placeholder="结束日期"
                  />
                </div>
                <el-input
                    v-model="holiday.description"
                    type="textarea"
                    placeholder="描述"
                    class="edit-textarea"
                    :rows="3"
                />
                <el-button type="danger" @click="deleteHoliday(index)" class="delete-btn">
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 管理员新增节假日按钮 -->
        <div v-if="isAdmin && isEditing" class="admin-controls">
          <el-button type="primary" @click="addHoliday" class="add-btn">
            <i class="el-icon-plus"></i>
            添加节假日
          </el-button>
          <el-button type="success" @click="saveHolidays" class="save-btn">
            <i class="el-icon-check"></i>
            保存节假日
          </el-button>
        </div>

        <!-- 日程编辑区域（仅管理员可见） -->
        <div v-if="isEditingSchedule && isAdmin" class="schedule-edit">
          <h3 class="edit-title">
            <span class="edit-icon">✏️</span>
            编辑日程
          </h3>
          <div
              v-for="(schedule, index) in schedules"
              :key="schedule.id"
              class="schedule-edit-item"
          >
            <el-input
                v-model="schedule.title"
                placeholder="日程标题"
                class="edit-input"
            />
            <div class="date-inputs">
              <el-input
                  v-model="schedule.startDate"
                  type="date"
                  class="edit-input"
                  placeholder="开始日期"
              />
              <span class="date-separator">至</span>
              <el-input
                  v-model="schedule.endDate"
                  type="date"
                  class="edit-input"
                  placeholder="结束日期"
              />
            </div>
            <el-input
                v-model="schedule.description"
                type="textarea"
                placeholder="描述"
                class="edit-textarea"
                :rows="3"
            />
            <div class="color-picker">
              <label>颜色:</label>
              <el-input
                  v-model="schedule.color"
                  type="color"
                  class="color-input"
              />
            </div>
            <el-button type="danger" @click="deleteSchedule(index)" class="delete-btn">
              <i class="el-icon-delete"></i>
              删除
            </el-button>
          </div>
          <div class="admin-controls">
            <el-button type="primary" @click="addSchedule" class="add-btn">
              <i class="el-icon-plus"></i>
              添加日程
            </el-button>
            <el-button type="success" @click="saveSchedules" class="save-btn">
              <i class="el-icon-check"></i>
              保存日程
            </el-button>
          </div>
        </div>

        <!-- 日程展示区域 -->
        <div class="schedules">
          <div
              class="schedule-item"
              v-for="schedule in currentMonthSchedules"
              :key="schedule.id"
              :style="{ backgroundColor: schedule.color + '20', borderLeft: `4px solid ${schedule.color}` }"
          >
            <div class="schedule-header">
              <h3 class="schedule-title" :style="{ color: schedule.color }">{{ schedule.title }}</h3>
              <div class="schedule-dates">{{ formatDisplayDate(schedule.startDate, schedule.endDate) }}</div>
            </div>
            <p class="schedule-desc">{{ schedule.description }}</p>
          </div>
          <div v-if="currentMonthSchedules.length === 0 && currentMonthHolidays.length === 0" class="no-schedules">
            <div class="no-data-icon">📅</div>
            <p>本月暂无安排</p>
            <p class="no-data-hint" v-if="isAdmin">点击上方按钮添加节假日或日程</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CalendarManagement",
  data() {
    return {
      isEditing: false,
      isEditingSchedule: false,
      holidays: [],
      today: new Date(),
      currentMonth: new Date().getMonth(),
      currentYear: new Date().getFullYear(),
      schedules: [],
      monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      // 模拟节假日数据
      initialHolidays: [
        {
          id: 1,
          name: '元旦',
          startDate: '2025-01-01',
          endDate: '2025-01-01',
          description: '元旦节'
        },
        {
          id: 2,
          name: '春节',
          startDate: '2025-01-28',
          endDate: '2025-02-03',
          description: '春节假期'
        },
        {
          id: 3,
          name: '清明节',
          startDate: '2025-04-04',
          endDate: '2025-04-06',
          description: '清明节假期'
        },
        {
          id: 4,
          name: '劳动节',
          startDate: '2025-05-01',
          endDate: '2025-05-03',
          description: '劳动节假期'
        },
        {
          id: 5,
          name: '端午节',
          startDate: '2025-05-31',
          endDate: '2025-06-02',
          description: '端午节假期'
        }
      ],
      // 模拟校历日程数据
      initialSchedules: [
        {
          id: 1,
          title: '教职工上班',
          startDate: '2025-09-04',
          endDate: '2025-09-04',
          description: '教职工于2025年9月4日正式上班',
          color: '#4CAF50'
        },
        {
          id: 2,
          title: '学生报到',
          startDate: '2025-09-05',
          endDate: '2025-09-06',
          description: '本科、研究生老生9月5日-9月6日报到注册，9月8日正式上课',
          color: '#2196F3'
        },
        {
          id: 3,
          title: '新生报到',
          startDate: '2025-09-07',
          endDate: '2025-09-07',
          description: '本科、研究生新生报到',
          color: '#3F51B5'
        },
        {
          id: 4,
          title: '新生开学典礼',
          startDate: '2025-09-16',
          endDate: '2025-09-16',
          description: '本科、研究生新生开学典礼',
          color: '#9C27B0'
        },
        {
          id: 5,
          title: '国庆放假',
          startDate: '2025-10-01',
          endDate: '2025-10-07',
          description: '国庆假期，共7天',
          color: '#F44336'
        },
        {
          id: 6,
          title: '期末考试',
          startDate: '2026-01-10',
          endDate: '2026-01-20',
          description: '学期期末考试',
          color: '#FF9800'
        }
      ]
    }
  },
  computed: {
    // 若依框架中的管理员判断 - 根据实际情况调整
    isAdmin() {
      // 这里需要根据若依的实际权限管理方式调整
      // 示例：return this.$store.state.user.roles.includes('admin');
      return true; // 临时返回true用于测试
    },
    monthDays() {
      return this.getDaysInMonth();
    },
    currentMonthSchedules() {
      return this.getCurrentMonthSchedules();
    },
    currentMonthHolidays() {
      return this.getCurrentMonthHolidays();
    }
  },
  mounted() {
    this.loadHolidays();
    this.loadSchedules();
  },
  watch: {
    holidays: {
      handler() {
        this.saveHolidaysToStorage();
      },
      deep: true
    },
    schedules: {
      handler() {
        this.saveSchedulesToStorage();
      },
      deep: true
    }
  },
  methods: {
    // 日期格式化函数
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 加载节假日数据
    loadHolidays() {
      const savedHolidays = localStorage.getItem('holidays');
      if (savedHolidays) {
        this.holidays = JSON.parse(savedHolidays);
      } else {
        this.holidays = [...this.initialHolidays];
        this.saveHolidaysToStorage();
      }
    },
    // 加载日程数据
    loadSchedules() {
      const savedSchedules = localStorage.getItem('schedules');
      if (savedSchedules) {
        this.schedules = JSON.parse(savedSchedules);
      } else {
        this.schedules = [...this.initialSchedules];
        this.saveSchedulesToStorage();
      }
    },
    // 保存节假日数据到本地存储
    saveHolidaysToStorage() {
      localStorage.setItem('holidays', JSON.stringify(this.holidays));
    },
    // 保存日程数据到本地存储
    saveSchedulesToStorage() {
      localStorage.setItem('schedules', JSON.stringify(this.schedules));
    },
    // 管理员操作方法 - 节假日
    addHoliday() {
      const newId = this.holidays.length > 0 ? Math.max(...this.holidays.map(h => h.id)) + 1 : 1;
      this.holidays.push({
        id: newId,
        name: '',
        startDate: this.formatDate(new Date()),
        endDate: this.formatDate(new Date()),
        description: ''
      });
    },
    deleteHoliday(index) {
      this.holidays.splice(index, 1);
    },
    saveHolidays() {
      this.isEditing = false;
      this.$modal.msgSuccess('节假日保存成功');
    },
    // 管理员操作方法 - 日程
    addSchedule() {
      const newId = this.schedules.length > 0 ? Math.max(...this.schedules.map(s => s.id)) + 1 : 1;
      this.schedules.push({
        id: newId,
        title: '',
        startDate: this.formatDate(new Date()),
        endDate: this.formatDate(new Date()),
        description: '',
        color: '#409EFF'
      });
    },
    deleteSchedule(index) {
      this.schedules.splice(index, 1);
    },
    saveSchedules() {
      this.isEditingSchedule = false;
      this.$modal.msgSuccess('日程保存成功');
    },
    // 检查事件是否已过期
    isEventExpired(endDate) {
      const todayStr = this.formatDate(this.today);
      return endDate < todayStr;
    },
    // 获取当月的所有日期
    getDaysInMonth() {
      const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();

      const days = [];

      // 添加上个月的占位日期
      for (let i = 0; i < firstDayOfMonth; i++) {
        days.push({
          day: null,
          isCurrentMonth: false,
          isToday: false,
          hasSchedule: false
        });
      }

      // 添加当月的日期
      for (let i = 1; i <= daysInMonth; i++) {
        const dateStr = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
        const isToday = this.formatDate(this.today) === dateStr;

        // 查找当天是否有未过期的日程
        const hasSchedule = this.schedules.some(schedule => {
          if (this.isEventExpired(schedule.endDate)) return false;
          const startDate = new Date(schedule.startDate);
          const endDate = new Date(schedule.endDate);
          const currentDate = new Date(dateStr);
          return startDate <= currentDate && currentDate <= endDate;
        });

        // 查找当天是否有未过期的节假日
        const hasHoliday = this.holidays.some(holiday => {
          if (this.isEventExpired(holiday.endDate)) return false;
          const startDate = new Date(holiday.startDate);
          const endDate = new Date(holiday.endDate);
          const currentDate = new Date(dateStr);
          return startDate <= currentDate && currentDate <= endDate;
        });

        days.push({
          day: i,
          isCurrentMonth: true,
          isToday,
          hasSchedule,
          hasHoliday
        });
      }

      return days;
    },
    // 月份切换
    prevMonth() {
      this.currentMonth--;
      if (this.currentMonth < 0) {
        this.currentMonth = 11;
        this.currentYear--;
      }
    },
    nextMonth() {
      this.currentMonth++;
      if (this.currentMonth > 11) {
        this.currentMonth = 0;
        this.currentYear++;
      }
    },
    // 获取当前月的日程（过滤掉已过期的事件）
    getCurrentMonthSchedules() {
      const monthStart = new Date(this.currentYear, this.currentMonth, 1);
      const monthEnd = new Date(this.currentYear, this.currentMonth + 1, 0);

      return this.schedules.filter(schedule => {
        if (this.isEventExpired(schedule.endDate)) return false;
        const startDate = new Date(schedule.startDate);
        const endDate = new Date(schedule.endDate);
        return (startDate <= monthEnd && endDate >= monthStart);
      });
    },
    // 获取当前月的节假日（过滤掉已过期的节假日）
    getCurrentMonthHolidays() {
      const monthStart = new Date(this.currentYear, this.currentMonth, 1);
      const monthEnd = new Date(this.currentYear, this.currentMonth + 1, 0);

      return this.holidays.filter(holiday => {
        if (this.isEventExpired(holiday.endDate)) return false;
        const startDate = new Date(holiday.startDate);
        const endDate = new Date(holiday.endDate);
        return (startDate <= monthEnd && endDate >= monthStart);
      });
    },
    // 格式化显示日期
    formatDisplayDate(startDate, endDate) {
      if (startDate === endDate) {
        return startDate;
      } else {
        return `${startDate} ~ ${endDate}`;
      }
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.app-container {
  min-height: calc(100vh - 84px);
  background: #f0f2f5;
  padding: 20px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.holiday-page {
  max-width: 1400px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  margin: 0 auto;
}

/* 卡片通用样式 */
.calendar-card, .schedules-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
}

.calendar-card:hover, .schedules-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

/* 日历头部 */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.month-btn {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.month-btn:hover {
  background: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}

.current-date {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 星期标题 */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.weekday {
  text-align: center;
  color: #909399;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
}

/* 日历日期 */
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 20px;
  font-size: 14px;
}

.day {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  background: #f8f9fa;
  border: 1px solid transparent;
  font-weight: 500;
}

.day:hover {
  background: #f0f2f5;
  transform: translateY(-1px);
}

.day.other-month {
  color: #c0c4cc;
  background: #fafafa;
  opacity: 0.6;
}

.day.today {
  background: #409eff;
  color: white;
  font-weight: 700;
  border: 1px solid #409eff;
}

.day.has-schedule::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #67c23a;
}

.day.has-holiday {
  background: #fdf6ec;
  border: 1px solid #f5dab1;
}

.day.has-holiday::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e6a23c;
}

/* 今日信息 */
.today-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: #ecf5ff;
  border-radius: 6px;
  color: #409eff;
  margin-top: 15px;
  border: 1px solid #d9ecff;
}

.today-icon {
  font-size: 20px;
}

.today-details {
  flex: 1;
}

.today-date {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.today-week {
  font-size: 12px;
  opacity: 0.9;
}

/* 日程头部 */
.schedules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.schedules-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 20px;
}

.admin-buttons {
  display: flex;
  gap: 10px;
}

/* 节假日样式 */
.holiday-list {
  margin: 20px 0;
}

.holiday-title {
  color: #e6a23c;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #fdf6ec;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.holiday-icon {
  font-size: 18px;
}

.holiday-item {
  border: 1px solid #fdf6ec;
  padding: 16px;
  margin: 12px 0;
  border-radius: 6px;
  background: #fdf6ec;
  transition: all 0.3s ease;
}

.holiday-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.holiday-date {
  color: #e6a23c;
  font-weight: 600;
  margin: 8px 0;
  font-size: 14px;
}

.holiday-desc {
  color: #b88230;
  line-height: 1.5;
  font-size: 14px;
}

/* 编辑模式样式 */
.edit-input, .edit-textarea {
  margin: 8px 0;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.date-separator {
  color: #909399;
  font-size: 13px;
  font-weight: 600;
}

.admin-controls {
  margin: 15px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 日程编辑区域 */
.schedule-edit {
  margin: 20px 0;
  padding: 16px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  background: #f5f7fa;
}

.edit-title {
  color: #606266;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.edit-icon {
  font-size: 16px;
}

.schedule-edit-item {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: white;
}

.color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.color-picker label {
  color: #606266;
  font-weight: 600;
  font-size: 13px;
}

.color-input {
  width: 50px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
}

/* 日程展示区域 */
.schedules {
  margin-top: 15px;
}

.schedule-item {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.schedule-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.schedule-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.schedule-dates {
  color: #909399;
  font-size: 13px;
  font-weight: 600;
  background: #f5f7fa;
  padding: 3px 8px;
  border-radius: 4px;
}

.schedule-desc {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.no-schedules {
  text-align: center;
  color: #909399;
  padding: 30px 15px;
}

.no-data-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.no-schedules p {
  font-size: 14px;
  margin: 0 0 6px 0;
}

.no-data-hint {
  font-size: 12px !important;
  opacity: 0.7;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .holiday-page {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 800px;
  }

  .app-container {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .calendar-card, .schedules-card {
    padding: 15px;
  }

  .day {
    height: 40px;
  }

  .schedules-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .admin-buttons {
    flex-direction: column;
    width: 100%;
  }

  .admin-controls {
    flex-direction: column;
  }

  .date-inputs {
    flex-direction: column;
    align-items: flex-start;
  }

  .date-separator {
    display: none;
  }

  .schedule-header {
    flex-direction: column;
    gap: 8px;
  }

  .schedule-dates {
    align-self: flex-start;
  }

  .month-btn {
    width: 32px;
    height: 32px;
  }

  .current-date {
    font-size: 16px;
  }

  .schedules-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: 10px;
  }

  .calendar-card, .schedules-card {
    padding: 12px;
    border-radius: 6px;
  }

  .holiday-page {
    gap: 15px;
  }

  .day {
    height: 35px;
    font-size: 12px;
  }

  .current-date {
    font-size: 14px;
  }
}
</style>